<template>
  <div class="app-header-cart" :class="{open:isOpen}" @mouseenter="openDialog()" @mouseleave="closeDialog()">
    <!-- 购物车按钮 -->
    <div class="cart-icon" @click="goCart()">
      <span class="iconfont icon-cart"></span>
      <i>{{totalCount}}</i>
    </div>
    <!-- 购物车列表 -->
    <div class="cart-list">
      <ul ref="list">
        <li v-for="item in items" :key="item.skuId">
          <router-link class="image" :to="'/product/'+item.id" @click.native="closeDialog()">
            <img :src="item.picture" alt />
          </router-link>
          <div class="info">
            <p class="name ellipsis-2">{{item.name}}</p>
            <p class="attr ellipsis" :title="item.attrsText">
              {{item.attrsText}}
              <i>x{{item.count}}</i>
            </p>
          </div>
          <p class="price">¥{{(item.nowPrice*100*item.count/100).toFixed(2)}}</p>
          <span @click="delCart(item)" class="iconfont icon-guanbi"></span>
        </li>
      </ul>
      <div class="foot">
        <div class="calc">
          <p class="num">共{{totalCount}}件商品</p>
          <p class="amount">¥{{totalAmount}}</p>
        </div>
        <a href="javascript:;" @click="goCart()">去购物车结算</a>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
  name: 'app-header-cart',
  data () {
    return {
      isOpen: false,
      duration: 5000
    }
  },
  computed: {
    ...mapGetters('cart', ['totalCount', 'totalAmount']),
    ...mapState('cart', ['items'])
  },
  created () {
    this.getCart()
  },
  watch: {
    totalCount (now, old) {
      // 该条件，加入购物车触发。在购物车页面修改数量不触发。
      if (now > old && this.$route.path !== '/cart') {
        if (document.documentElement.scrollTop < 100) {
          this.openDialog()
          window.clearTimeout(this.timer)
          this.timer = window.setTimeout(() => {
            this.closeDialog()
          }, this.duration)
        } else {
          this.$message({ message: '加入购物车成功', type: 'success' })
        }
      }
      // 该条件，购物车无商品触发。在购物车页面修改数量不触发。
      if (now === 0 && this.$route.path !== '/cart') {
        this.closeDialog()
      }
    }
  },
  methods: {
    ...mapActions('cart', ['getCart', 'delCart']),
    openDialog () {
      // 数量为0不打开
      if (this.totalCount <= 0 || this.$route.path === '/cart') return false
      this.isOpen = true
      this.addCustomScroll()
    },
    closeDialog () {
      this.isOpen = false
      this.delCustomScroll()
    },
    goCart () {
      this.isOpen = false
      this.$router.push('/cart')
    },
    addCustomScroll () {
      let scrollTop = 0
      this.$refs.list.scrollTop = scrollTop
      this.$refs.list.addEventListener('mousewheel', (e) => {
        if (e.wheelDelta > 0) {
          if (scrollTop > 0) {
            scrollTop = scrollTop - 10
          }
        } else {
          if (scrollTop < this.$refs.list.scrollHeight - this.$refs.list.offsetHeight) {
            scrollTop = scrollTop + 10
          }
        }
        this.$refs.list.scrollTop = scrollTop
        e.preventDefault()
      })
    },
    delCustomScroll () {
      this.$refs.list.removeEventListener('mousewheel', () => {})
    }
  }
}
</script>

<style scoped lang='less'>
// 购物车按钮
.app-header-cart {
  width: 45px;
  height: 32px;
  position: relative;
  margin-top: 2px;
  cursor: pointer;
  .cart-icon {
    position: relative;
    line-height: 32px;
    text-align: center;
    &:hover {
      span {
        color: @xtxColor;
      }
    }
    > span {
      font-size: 22px;
      color: #333;
    }
    > i {
      position: absolute;
      top: 1px;
      left: 26px;
      line-height: 1;
      padding: 1px 6px;
      font-style: normal;
      background-color: @fuzuColor;
      border-radius: 15px;
      color: #fff;
      font-size: 12px;
    }
  }
  &.open {
    .cart-list {
      transform: scale(1);
      opacity: 1;
    }
  }
}
// 购物车列表
.cart-list {
  width: 420px;
  height: 370px;
  background: #ffffff;
  border: 1px solid @xtxColor;
  border-radius: 4px;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
  position: absolute;
  top: 48px;
  right: 0;
  z-index: 998;
  display: flex;
  flex-direction: column;
  transform-origin: center top;
  transform: scale(1, 0);
  opacity: 0;
  transition: all 0.1s linear 0.1s;
  &::before {
    content: "";
    position: absolute;
    top: -9px;
    right: 12px;
    width: 16px;
    height: 16px;
    border-right: 1px solid @xtxColor;
    border-top: 1px solid @xtxColor;
    transform: scale(0.6, 1) rotate(-45deg);
    background: #fff;
    box-shadow: 2px -2px 2px rgba(0, 0, 0, 0.1);
  }
  ul {
    flex: 1;
    overflow-y: scroll;
    &::-webkit-scrollbar{
      width:10px;
      height:10px;
    }
    &::-webkit-scrollbar-track{
      background: #f5f5f5;
      border-radius: 2px;
    }
    &::-webkit-scrollbar-thumb{
      background: #e4e4e4;
      border-radius:10px;
    }
    &::-webkit-scrollbar-thumb:hover{
      background: #ccc;
    }
    li {
      height: 100px;
      display: flex;
      padding: 10px 10px 10px 15px;
      border-bottom: 1px dashed #e3f9f4;
      line-height: 28px;
      .image {
        width: 80px;
        height: 80px;
        border: 1px solid #e4e4e4;
      }
      .info {
        flex: 1;
        padding: 0 10px;
        .name {
          font-size: 16px;
        }
        .attr {
          color: #999;
          width:170px;
          position:relative;
          padding-right:30px;
          i {
            position: absolute;
            right: 0;
            top: 0;
          }
        }
      }
      .price {
        width: 80px;
        font-size: 16px;
        color: @priceColor;
        text-align: right;
      }
      .iconfont {
        width: 30px;
        text-align: center;
        color: #ccc;
        font-size: 12px;
        cursor: pointer;
        padding-left: 10px;
      }
    }
  }
  .foot {
    height: 68px;
    padding: 0 20px;
    background: #e3f9f4;
    display: flex;
    align-items: center;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    .calc {
      flex: 1;
      font-size: 16px;
      .amount {
        color: @priceColor;
        padding-top: 5px;
      }
    }
    a {
      width: 150px;
      height: 46px;
      line-height: 46px;
      text-align: center;
      color: #fff;
      font-size: 16px;
      background: @xtxColor;
      border-radius: 4px;
    }
  }
}
</style>
